<script lang="ts" setup>
const route = useRoute();
const routeParam = route.params as { vid: string; lang: Langs };
const commendOpen = ref(false);
const toast = useToast();
// const vidData = ref<{ currentTime: number; duration: number }>({
//   currentTime: 0,
//   duration: 0,
// });
const preSaved = ref(false);
const commentStore = useMyCommentStore();
const getFlow = async () => {
  if (!preSaved.value) {
    toast.add({
      id: "4782",
      title: "请先保存流程图",
      timeout: 1500,
      color: "yellow",
      icon: "i-heroicons-exclamation-circle",
    });
    return;
  }
  // preSaved.value === true;
  await $fetch(`/api/flow`).then((res) => {
    if (res.msg === "ok") {
      commentStore.sharedFLowObj = res.data;
      window.location.href = "#postComment";
      preSaved.value = false;
    }
    else {
      toast.add({
        id: "4782",
        title: "暂无流程图可分享",
        timeout: 1500,
        color: "yellow",
        icon: "i-heroicons-exclamation-circle",
      });
    }
  })
};

// TODO: get from server
const video = ref<VideoInfoType | null>(null);
onMounted(async () => {
  const res = await $fetch(`/api/course/${routeParam.lang}/${routeParam.vid}`, {
    method: "GET",
  });
  if (res.msg === "ok") 
    video.value = res.data;
});

const onLike = () => {
  if (video.value) 
    video.value.like += 1;
};
const onDislike = () => {
  if (video.value) 
    video.value.dislike += 1;
};
const toBasePage = () => {
  navigateTo(`/series-${routeParam.lang}`)
};
</script>

<template>
  <div>
    <!-- <p>这里是 视频id为{{ $route.params.vid }}的视频</p> -->
    <div class="the-player">
      <ClientOnly>
        <ThePlayer @video-end="commendOpen = true" />
        <template #fallback>
          <FallBack />
        </template>
      </ClientOnly>
      <!-- <UButton @click="commendOpen = true">
        结束视频
      </UButton> -->
      <UModal v-model="commendOpen">
        <div class="p-4 h-[300px] flex justify-center flex-col items-center">
          <div class="m-2 text-lg">
            视频结束, 可以完成相关的习题
          </div>
          <div>
            <span>python测试卷1</span>
            <span>
              <RouterLink to="/exam/1">
                <UButton variant="outline">开始答题</UButton>
              </RouterLink>
            </span>
          </div>
        </div>
      </UModal>
      <!-- <div>
        {{ vidData.currentTime.toFixed(4) }} / {{ vidData.duration.toFixed(4) }} =
        {{ vidData.duration === 0 ? 0 : (vidData.currentTime / vidData.duration).toFixed(4) }}
      </div> -->
    </div>
    <ClientOnly>
      <!-- 展示视频基本信息 -->
      <div v-if="!!video" class="message-card">
        <UCard class="mt-4">
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <UAvatar
                size="sm"
                :src="video.author.avatar"
                :alt="video.author.name"
              />
              <div class="ml-2">
                <p class="text-md font-semibold">
                  作者: {{ video.author.name }}
                </p>
                <!-- <p class="text-xs text-gray-500">
                  描述: {{ video.author.desc }}
                </p> -->
              </div>
            </div>
            <div class="flex items-center">
              <UButton
                size="sm"
                color="gray"
                icon="i-material-symbols:thumb-up"
                class="mr-2"
                @click.once="onLike"
              >
                {{ video.like }}
              </UButton>
              <UButton
                size="sm"
                color="gray"
                icon="i-material-symbols:thumb-down"
                @click.once="onDislike"
              >
                {{ video.dislike }}
              </UButton>
            </div>
          </div>
        </UCard>
        <UCard class="mt-4">
          <h2 class="text-lg font-semibold m-2">
            {{ video.title }}
          </h2>
          <p class="text-gray-500 m-2">
            {{ video.content }}
          </p>
          <p class="m-2">
            <UBadge
              color="black"
              class="cursor-pointer"
              variant="solid"
              @click="toBasePage"
            >
              #{{ routeParam.lang }}
            </UBadge>
          </p>
        </UCard>
      </div>
      <!-- 占位 -->
      <div class="h-4" />
      <!-- Vue Flow -->
      <div>
        <UCard>
          <template #header>
            <div id="flowGraph" class="flex justify-between">
              <strong class="mt-2 text-lg">流程图</strong>
              <div>
                <UButton @click="getFlow">
                  分享
                </UButton>
              </div>
            </div>
          </template>

          <div class="w-full h-[500px]">
            <VueFlowVFlowDnd @update-pre-saved="preSaved = true" @update-pre-saved-rev="preSaved = false" />
          </div>
        </UCard>
      </div>

      <!-- <div class="w-full h-[300px]">
      </div> -->
      <!-- TODO2: 评论区 -->
      <div>
        <CommentComp :cid="Number.parseInt($route.params.vid as string)" />
      </div>
      <template #fallback>
        <FallBack />
      </template>
    </ClientOnly>
  </div>
</template>

<style></style>
